<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>KISSY - 全终端适配的 JS 类库</title>
  <meta name="viewport" content="width=device-width">
  <link href="http://fonts.googleapis.com/css?family=Droid+Sans|Lekton|Ubuntu+Mono:400,700" rel="stylesheet">
	<link rel="stylesheet" href="templates/assets/bootstrap.css">
	<link href="templates/assets/normalize.css" rel="stylesheet">
	<link href="templates/assets/kissy.css" rel="stylesheet">
	<link href="templates/assets/prettify.css" rel="stylesheet">
	<link href="templates/assets/forkit.css" rel="stylesheet">
	<script src="templates/assets/jquery.min.js"></script>
	<script src="templates/assets/script.js" type="text/javascript"></script>
	<script src="http://g.tbcdn.cn/trip/kissy/1.4.0/seed-min.js"></script>
	<script src="api/assets/highlight.pack.js"></script>
	<link href="api/assets/tomorrow-night-bright.css" rel=stylesheet />
	<link rel="shortcut icon" href="http://a.tbcdn.cn/s/kissy/favicon.ico">
</head>

<body class="">
    <nav id="sidebar">
    <header>
		<a href="index.html">
			<!--img src="http://gtms04.alicdn.com/tps/i4/T1ceiPFbpcXXcljp_h-200-89.png"-->
			<!--img src="templates/assets/img/logo_6.png"-->
			<!--img src="http://gtms04.alicdn.com/tps/i4/T14oa2FcNcXXaOySEh-180-104.png" alt="" /-->
			<!--img src="http://gtms01.alicdn.com/tps/i1/T1Amq1FaXgXXbXVSUh-180-127.png" alt="" /-->
			<img src="http://gtms02.alicdn.com/tps/i2/T1N0jTXXXjXXay7Rri-175-78.png" alt="" />
		</a>
	</header>
    <ul>
      <li class="nav-divider"><a href="index.html"><img src="templates/assets/img/icon-home.png">首页</a></li>
      <li class="nav-divider"><a href="why-kissy.html"><img src="templates/assets/img/icon-why.png">Why KISSY?</a></li>
      <li><a href="get-started.html"><img src="templates/assets/img/icon-getting-started.png">KISSY 1.4.x 教程大纲</a></li>
      <li class="nav-sub"><a href="module-map.html">核心模块列表</a></li>
      <li class="nav-sub"><a href="kmd.html">KISSY 模块规范 (KMD)</a></li>
      <li class="nav-sub"><a href="gbs.html">浏览器兼容基准(GBS)</a></li>
      <li class="nav-sub"><a href="http://cyj.me/jquery-kissy-rosetta/">jQuery KISSY 对比手册</a></li>
      <li class="nav-sub"><a href="http://gallery.kissyui.com/guide">KISSY 组件开发规范</a></li>
      <li class="nav-sub nav-divider"><a href="history.html">历史版本</a></li>
      <li><a href="">API Doc</a></li>
      <li><a href="http://demo.kissyui.com">Demos</a></li>
      <li class="nav-divider"><a href="http://gallery.kissyui.com">KISSY Gallery</a></li>
      <li><a href="tools.html">KISSY 项目构建工具</a></li>
      <li class="nav-sub"><a href="kmc.html">KS Module Compiler</a></li>
      <li class="nav-sub"><a href="http://abc.f2e.taobao.net">ABC</a></li>
      <li class="nav-sub nav-divider"><a href="clam.html">Clam</a></li>
      <li><a href="third-party-lib.html">第三方代码库</a></li>
      <li class="nav-sub"><a href="https://github.com/lorrylockie/tpap/wiki">面向第三方安全的 KISSY</a></li>
      <li class="nav-sub"><a href="http://www.builive.com/demo/index.php">BUI</a></li>
      <li class="nav-sub nav-divider"><a href="http://work.tmall.net/muidoc/build/">MUI</a></li>
      <li><a href="https://github.com/kissyteam/kissy/blob/master/CONTRIBUTING.md">为 KISSY Core 贡献代码</a></li>
      <li class="nav-sub"><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml">HTML/CSS编码规范</a></li>
      <li class="nav-sub nav-divider"><a href="http://docs.kissyui.com/source/tutorials/style-guide/google/javascriptguide.xml">JavaScript 编码规范</a></li>
	  <li><a href="upgrade.html"><img src="templates/assets/img/icon-documentation.png">1.3.x->1.4.0 升级指南</a></li>
	  <li><a href="faq.html"><img src="templates/assets/img/icon-faqs.png">FAQ</a></li>
      <li><a href="https://github.com/kissyteam/kissy"><img src="templates/assets/img/icon-github.png">GitHub</a></li>
	  <li><a href="core-team.html"><img src="templates/assets/img/icon-google-plus.png">KISSY 核心小组</a></li>
    </ul>
  </nav>

  <div id="content">
    <article>
      

	<h1>Seed</h1>
<blockquote>
<p>Seed 模块是 KISSY 的核心。必须在所有使用 KISSY 的页面中引入，所有核心模块的依赖关系均在 Seed 中定义，基于它可以生长出你所需要的代码基础库，而无需手写<code>script</code>标签。注意：Seed 并不是一个“模块名”，但它包含这些核心模块：lang，uri，features，promise，path，loader，ua。模块名称均小写。</p>
</blockquote>
<h2>载入 seed</h2>
<pre><code>&lt;script src=&quot;http://g.tbcdn.cn/kissy/k/1.4.0/seed-min.js&quot;&gt;&lt;/script&gt;</code></pre>
<p>Seed 是一段很小的脚本，包含模块加载器，用来加载其他核心模块。Seed 会引入全局对象<code>KISSY</code>。加载外部模块：</p>
<pre><code>KISSY.use(&#39;node&#39;,function(S,Node){
    // Your Code...    
});</code></pre>
<p>这时浏览器会将<code>node</code>模块对应的js文件及其依赖载入进来，载入后会注册<code>node</code>模块到 KISSY，之后执行这里的回调，将<code>node</code>模块返回的对象带入第二个参数。回调函数第一个参数为KISSY对象的简写。注意这里有两个关键行为：</p>
<ol>
<li>载入<code>node</code>模块对应的外部js文件</li>
<li>注册<code>node</code>模块</li>
</ol>
<p>这是<code>use()</code>函数的两个基本功能，这两个基本功能通过<code>模块名称</code>统一起来，让他们看其来是一个操作，但不要忘记，实际上有这两层含义。</p>
<h2>模块</h2>
<p>根据上文，模块名有两个层面的含义</p>
<ol>
<li>指示文件所在的地址</li>
<li>指示模块的具体内容</li>
</ol>
<p>KISSY 要求所有满足 KMD 规范的模块，首先具备<code>属性2</code>，其次具备<code>属性1</code>。即<code>use()</code>首先要执行已经注册的模块，如果没有注册，则先尝试去模块名所指示的位置加载模块文件，再执行注册和运行。因此，只有被KISSY.add包装起来的代码，才是正确的 KISSY 模块。</p>
<h3>场景1：运行已经注册的模块</h3>
<pre><code>// index.html
// 同一个文件中执行add和use

KISSY.add(&#39;a&#39;,function(S){
    return {};    
});

// 这里的use()不会造成一次http请求，因为模块a已经被注册过
KISSY.use(&#39;a&#39;,function(S,A){
    // Your Code
});</code></pre>
<h3>场景2：运行外部文件注册的模块</h3>
<pre><code>// index.html
// 这里的use()会先载入&#39;path/to/a.js&#39;(及其依赖)，因为这时模块&#39;path/to/a&#39;没有被注册过
KISSY.use(&#39;path/to/a&#39;,function(S,A){
    // A 为模块&#39;path/to/a&#39;的返回对象
    // Your Code
})

// path/to/a.js
// 外部文件中注册了名为&#39;path/to/a&#39;的模块
KISSY.add(&#39;path/to/a&#39;,function(S){
    return {};    
});</code></pre>
<h3>场景3：注册模块族</h3>
<p>可否将很多模块的注册抽离入一个文件？当然可以，比如这个例子，mods.js 包含了很多个模块的注册，预先载入页面后，KISSY 注册了mods.js里的这些模块，这时通过use()调用时，只是运行注册的模块，而不会造成额外的http请求</p>
<pre><code>// index.html
&lt;script src=&quot;mods.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    KISSY.use(&#39;a,b,c&#39;,function(S,A,B,C){
        // Your Code
    });
&lt;/script&gt;

// mods.js
KISSY.add(&#39;a&#39;,function(){});
KISSY.add(&#39;b&#39;,function(){});
KISSY.add(&#39;c&#39;,function(){});</code></pre>
<p>总之，KISSY.use() 函数的执行，会首先查找模块是否已经注册，若注册过，则直接执行模块逻辑，若没有注册过，则先加载模块名对应的模块文件，再注册并执行。KISSY Seed中包含的模块即可以通过这种方式直接调用，而不会造成额外的http请求。</p>
<h3>场景4：运行一个没有被注册过的模块（报错）</h3>
<p>KISSY.use() 的目的是运行模块并执行回调，载入外部文件只是其附加功能。因此不能使用KISSY.use()来载入任意外部文件。比如：</p>
<pre><code>// index.html
// 运行出错，因为&#39;path/to/jquery&#39;没有被注册
KISSY.use(&#39;path/to/jquery&#39;,function(S,jQuery){
    // Your Code...    
});

// jquery.js
function(window,undefined){
    // blablabla...
}();</code></pre>
<p>必须给jquery.js冠以KMD格式：</p>
<pre><code>// jquery.js
KISSY.add(&#39;path/to/jquery&#39;,fucntion(S)){
    // jquery 主体内容
    function(window,undefined){
        // blablabla...
    }();
    return jQuery;
});</code></pre>
<hr>
<h2>模块别名</h2>
<p>上文提到，模块名称用一个路径来表示，那么类似<code>node</code>这种核心模块，如何对应到具体的文件路径呢？通过 alias 来实现。比如映射之前代码为：</p>
<pre><code>// index.html
KISSY.use(&#39;path/to/a&#39;,function(S,A){
    // use A
});

// path/to/a.js
KISSY.add(&#39;path/to/a&#39;,function(S){
    return {};
});</code></pre>
<p>映射之后：</p>
<pre><code>// index.html
// 配置映射，a =&gt; path/to/a
KISSY.config(&#39;modules&#39;,{
    &#39;a&#39;:{
        alias:[&#39;path/to/a&#39;]
    }
});

// 使用a
KISSY.use(&#39;a&#39;,function(S,A){
    // use A
});

// path/to/a.js
// a.js 的代码无变化
KISSY.add(&#39;path/to/a&#39;,function(S){
    return {};
});</code></pre>
<hr>
<h2>Seed 中的模块预设</h2>
<p>以上为 KISSY 核心模块的实现机理。<code>seed.js</code> 类似上文提到的 <code>mods.js</code>，是一个注册模块的集合，<code>seed</code>并不表示任何一个模块名，因此这个用法是错误的：</p>
<pre><code>KISSY.use(&#39;seed&#39;,function(){});</code></pre>
<p>应当这样使用Seed中注册的模块</p>
<pre><code>KISSY.use(&#39;lang,ua&#39;,function(S,Lang,UA){
    // Your code...    
});</code></pre>
<h3>使用Seed中模块的另外一种快捷调用方式</h3>
<p>seed.js 中注册的模块都会给全局KISSY对象挂载快捷调用的通道，比如<code>Lang.clone()</code>可以通过<code>KISSY.clone()</code>来调用。但这种做法仅限于KISSY核心模块，自定义模块建议严格按照KMD规范来传递参数。</p>
<h2>模块的一次性加载</h2>
<p>由于KISSY设计是模块化的，模块之间的依赖关系通过use()和add()来处理，但模块依赖关系是记录在各自模块当中的，尽管程序运行逻辑上不会出错，但会造成串行加载。比如a模块依赖b，b依赖c，页面在加载完成b模块之前并不知道b依赖了别的什么模块，加载瀑布过程形如：</p>
<p><img src="http://jayli.github.io/sandbox/assets/loading.png" alt=""></p>
<p>为了避免速度很慢的串行加载，我们预先将模块依赖置于全局，页面在载入a模块时就知道a总共依赖了b和c，且b依赖c。这时KISSY会处理好a、b、c的执行顺序并一并合并载入。这样HTTP请求数就降低为1个。通常在开发阶段我们不需要载入全局的依赖表，在发布上线时，通过<a href="kmc.html">kmc</a>工具解析生成模块依赖关系表，至于全局即可。定义模块依赖关系的写法如下：</p>
<pre><code>KISSY.config(&#39;modules&#39;,{
    &quot;a&quot;:{
        // &quot;a&quot; 模块的依赖信息
        requires:[&quot;b&quot;,&quot;d&quot;]
    },
    &quot;b&quot;:{
        // &quot;b&quot; 模块的依赖信息
        requires:[&#39;c&#39;,&#39;e&#39;]
    }
});</code></pre>
<p>这时需要CDN支持动态脚本的合并输出，比如淘宝CDN同时输出<code>a.js</code>,<code>b.js</code>,<code>c.js</code>：</p>
<pre><code>http://cdn/??a.js,b.js,c.js</code></pre>
<p>Yahoo CDN则这样写：</p>
<pre><code>http://cdn/combo?a.js&amp;b.js&amp;c.js</code></pre>
<p>拼装合并脚本的模式默认采用淘宝CDN支持的形式，如果需要其他配置，请参照<a href="loader.html">loader</a></p>
<h2>模块的去重</h2>
<p>如果已经载入过了某个模块，再次<code>use()</code>的时候会不会重新加载一次？不会！此外，如果在开始加载时遇到重复依赖的问题，KISSY Loader也会将重复去掉，只加载最小的集合。比如这样的依赖关系：</p>
<p><img src="http://gtms03.alicdn.com/tps/i3/T1r5aRFkJXXXbNU1_F-580-280.png" alt=""></p>
<p>其中，init.js和calculate.js两个文件都依赖了stdout.js，这时只会加载stdout.js一次。</p>
<h2>Debug模式</h2>
<p>如果启用了debug模式，则默认载入对应模块的源文件，否则载入<code>-min</code>的文件</p>
<pre><code>KISSY.config(&#39;debug&#39;,true);

// 会请求http://basepath/a.js
KISSY.use(&#39;a&#39;,function(){
    // Your code...
});</code></pre>
<p>如果关闭debug模式，则会请求&#39;-min&#39;文件</p>
<pre><code>KISSY.config(&#39;debug&#39;,false);

// 会请求http://basepath/a-min.js
KISSY.use(&#39;a&#39;,function(){
    // Your code...
});</code></pre>


<div id="disqus_thread"></div>
<script>
    if((window.location.hostname.indexOf("kissyui.com")!=-1 )&& window.localStorage.getItem("kissy-commment")!="0"){
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'kissy-docs'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
     //var disqus_identifier = '/anim';
     //var disqus_url = window.location;

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    }
</script>



      
  <style>
	.github-btn {
		border: 0 none;
		overflow: hidden;
		margin-top:4px;
	}
	footer {
		border-top:1px solid #e2e2e2;
		padding-top:20px;
		clear:both;
	}
	/* iPhone 及以下 */
	@media only screen and (max-width: 767px) {
		.github-link {
			display:none;
		}
	}
  </style>
  <footer>




	<div class="text-center">
		©2013 - 2033 KISSY UI LIBRARY
		<br /> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe> 
	<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
	</div>
  </footer>
    </article>
  </div>
  <a target="_blank" href="https://github.com/kissyteam/kissy" class="github-link"><img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0; right: 0; border: 0; z-index: 50"></a>
  <script>
	var S = KISSY;
	(function(){
		S.use('node',function(S){
			S.all('code').each(function(node){
				var className = node.attr('class');
				if(/^lang-/.test(className)){
					var tc = className.replace(/^lang-/,'');
					node.replaceClass(className,tc);
				}
			});
			hljs.tabReplace = '    ';
			hljs.initHighlighting();
		});
	})();
	(function(){
		var h3s = document.getElementsByTagName('h3');
		for(var i = 0;i<h3s.length;i++){
			var str = S.trim(h3s[i].innerHTML);
			try{
				str = str.match(/\w+/)[0];
			}catch(e){
				continue;
			}
			h3s[i].innerHTML = '<a name="'+str+'"></a>' + h3s[i].innerHTML;
		}
	})();
  </script>
</body>
</html>
